<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>抽奖</title>
</head>

<body>
    <div class="vh-100 d-flex flex-column justify-content-center align-items-center">
        <div class="mb-5"><span id="name" class="text-danger" style="font-size: 200px;"></span></div>
        <div>
          <button type="button" id="start" class="btn btn-success btn-lg">开始</button>
          <button type="button" id="stop" class="btn btn-danger btn-lg ml-3">结束</button>
        </div>
        <div class="mt-5 text-secondary">已获奖人数 <span id="lucky-count" class="text-primary" style="font-size: 20px;"></span> </div>
    </div>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type = 'text/javascript'>
      var names = ["史少娜","于瑞贤","刘晓梅","矫英","左倩倩","张晓静","李进波","李延辉","姜丹","李锦秀","傅蓬",
                   "谭秀丛","王文清","时壮丽","刘方圆","马晓甜","王培培","刘欢欢","张明慧","于曰灵","李盛蕾","刘军",
                   "刘守伦","罗磊","黄路","贾红珍","路莎莎","张艳","李振宇","王素杰","王春红","王辉","彭亚男",
                   "冉文斌","赵起超","赵祥栋","张丽丽","牟利泉","温俊芳","陈娜","陈婧","高飞","宋岩","金鑫凤",
                   "杨俊霞","王成刚","赵庆平","郝建明","姜柄伍","全金实","刘伯新","杜欢","孟倩倩","刘永超","王宏伟",
                   "李秀华","徐世阳","李想","尚永娟","康明华","米经昊","陈帅","田健钧","曾迪","任晓东",
                   "宋金默","邓仁伟","于小敏","冷燕娜","付燕","邵宾","陈做成","赵月","霍新旺","段明星","姜斌",
                   "张玉雪","张环玉","韩洪峰","刘晖","赵胜男","刘兴龙","王慧芳","张辉","张丽荣","瞿露露",
                   "马苗德","韩涛","袁李鹏","牛吉玉","翟瑞龙","李颖楠","孙丽宁","申杰","白智方","李嘉辉",
                   "马玉翠","尚玲玲","王珊珊","孙燕","张超","刘培英","唐晓旭","王暖明","张方","孙芸芸","匡永超",
                   "韩梦瑶","刘雁平","刘静华","栾萍", "吕雅绪","魏欣欣"];
      var tmp_index = -1;
      var lucky_count = 0;
      var t;
      function start(){
        tmp_index = parseInt(Math.random() * names.length);
        $("#name").text(names[tmp_index]);
      }
    $(function(){
      $("#start").click(function(){
        console.log(names.length);
        if(names.length == 0){
          alert("没有抽奖人啦！")
        }
        t = setInterval("start()", 50)
      });

      $("#stop").click(function(){
        if(tmp_index > -1){
          names = $.grep(names,function(v, i){
            return i != tmp_index;
          });
          lucky_count = lucky_count + 1;
          $("#lucky-count").text(lucky_count);
          clearTimeout(t);
        }
      })
    })
  </script>
</body>

</html>